<template>
  <div class="cloud-village">
    <!-- 顶部导航 -->
    <div class="yun">
            <van-icon style="margin-top: 5px;" size="25" name="arrow-left" />
            <div class="title">云圈</div>
    </div>

    <!-- 云圈内容 -->
      <div class="header">
        <div class="circle-info">
          <h2>云村解忧杂货铺</h2>
          <p>7.4万颗浏览值 · 5741人在线</p>
        </div>
        <van-button size="small" plain round type="default">邀请好友</van-button>
      </div>

    <div class="card" style="margin-top: 10px;">
        <van-tabs v-model:active="active" animated color="red" background="#f4f4f4">
            <!-- 群聊 -->
            <van-tab title='群聊' name="a">
                <div class="top">
                  <van-icon name="arrow-down" />
                  <div class="right">讨论群</div>
                </div>
                <div class="bottom" v-for="item in playList_a" :key="item.id">
                        <div class="left">
                            <img width="45px" height="45px" :src="item.url">
                        </div>
                        <div class="right">
                            <div style="font-weight: bold;">{{ item.name }}</div>
                            <div style="font-size: 12px;color: #736d6b;">{{ item.desc }}</div>
                        </div>
                    </div>
                </van-tab>
                <!-- 圈内动态 -->
                <van-tab title='圈内动态' name="b">
          <div v-for="(post, index) in communityPosts" :key="index" class="post">
            <div class="post-header">
              <img width="45px" height="45px" :src="post.avatar">
              <div class="post-user-info">
                <div class="post-username">{{ post.username }}</div>
                <div class="post-time">{{ post.time }}</div>
              </div>
            </div>
            <div class="post-content">
              <p>{{ post.content }}</p>
              <img height="300px" v-if="post.image" :src="post.image" alt="Post Image">
            </div>
            <div class="post-actions">
              <van-icon name="like-o" /> {{ post.likes }}
              <van-icon name="chat-o" style="margin-left: 20px;" /> {{ post.comments }}
            </div>
          </div>
                </van-tab>
        <!-- 匿名信箱 -->
        <van-tab title='匿名信箱' name="c">
          <div v-for="(letter, index) in anonymousLetters" :key="index" class="letter">
            <div class="letter-header">
              <div class="letter-time">{{ letter.time }}</div>
            </div>
            <div class="letter-content">
              <p>{{ letter.content }}</p>
            </div>
          </div>
                </van-tab>
            </van-tabs>

          </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
const playList_a = ref([
    {id:1,url:"https://ww2.sinaimg.cn/mw690/0061ljzNly1ht2b2jfwhdj30u00u0mzm.jpg",name:'解忧音乐安利',desc:'王科学Dr: 是今晚发新歌吗，好期待哦'},
    {id:2,url:"https://q9.itc.cn/q_70/images03/20240607/100a8219bc9044e5a712e464525577c3.jpeg",name:'说出自己的小秘',desc:'南山: 好久不见'},
    {id:3,url:"https://q5.itc.cn/q_70/images03/20250129/12e5639ac6514143a3925a787c17ac8c.jpeg",name:'暗恋这件小事',desc:'是你的点_本人: 正好能看见萤火虫'},
    {id:4,url:"https://ww3.sinaimg.cn/mw690/0089kAFBgy1hsv866winxj30sg0sgtb9.jpg",name:'终于等到你',desc:'一块苏皮糖: 这不得多听几遍么?'}

])

const communityPosts = ref([
  {
    avatar: "https://img1.baidu.com/it/u=553863685,2263870615&fm=253&app=138&f=JPEG?w=500&h=500",
    username: "小张",
    time: "2小时前",
    content: "今天发现了一首超级好听的歌，分享给大家！",
    image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F73f2454b-0ee4-96b8-2d5a-c9d2442fd805%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754476096&t=4671b3093434e1385db16dcb12b6bfde",
    likes: 12,
    comments: 3
  },
  {
    avatar: "https://n.sinaimg.cn/sinakd20123/560/w1080h1080/20220304/17d6-6af21f5aea34b830a374a27d6ac9584c.jpg",
    username: "小李",
    time: "5小时前",
    content: "最近心情有点低落，希望能在这里找到安慰。",
    image: "https://img1.baidu.com/it/u=3799887333,1080832818&fm=253&fmt=auto&app=138&f=JPEG?w=454&h=807",
    likes: 5,
    comments: 1
  }
]);

const anonymousLetters = ref([
  {
    time: "今天 08:30",
    content: "有时候觉得生活就像一场漫长的考试，我却总是找不到正确答案。"
  },
  {
    time: "昨天 17:45",
    content: "鼓起勇气去健身房，却在门口徘徊了十分钟。为什么我总是这么害怕开始？"
  },
  {
    time: "昨天 23:10",
    content: "深夜加班后走在路上，突然发现路灯把影子拉得很长。那一刻，孤独感油然而生。"
  },
  {
    time: "前天 12:00",
    content: "每次看到父母为我忙碌的身影，都觉得自己还不够努力。希望能早日让他们过上好日子。"
  },
  {
    time: "3天前 09:20",
    content: "偷偷喜欢一个人两年了，却从未说出口。害怕一旦说破，连朋友都做不成。"
  }
]);

const active = ref('a');
</script>

<style scoped>
.cloud-village {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.yun{
    display: flex;
    padding: 10px;
    .title{
        flex: 1;
        margin-top: 5px;
        text-align: center;
        font-size: 18px;
        font-family: '行书';
    }
}
.circle-info h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.circle-info p {
  font-size: 12px;
  color: #999;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.top{
    display: flex;
    
    .right{
    font-size: 15px; 
    color: #736d6b;
    margin-top: 5px;
    margin-left: 5px;
    }
}
.bottom{
    padding: 10px;
    display: flex;
    .left{
        margin-right: 10px;
        img{
            border-radius: 50%;
        }
    }
}
.bottom .left {
  margin-right: 10px;
}

.bottom .left img {
  border-radius: 50%;
}

.post {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-user-info {
  margin-left: 10px;
}

.post-username {
  font-weight: bold;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.post-content {
  margin-bottom: 10px;
}

.post-content img {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 10px;
}

.post-actions {
  display: flex;
  align-items: center;
  color: #736d6b;
}

.letter {
  background-color: #fff;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.letter-header {
  margin-bottom: 10px;
}

.letter-time {
  font-size: 12px;
  color: #999;
}
</style>